<template>
  <baidu-map @ready="loadedMap" @click="clickMap" :style="mapStyle" :zoom="zoom" :center="mapCenter"
    :scroll-wheel-zoom="true">
    <bm-view style="width: 100%;height: 400px"></bm-view>
    <!--拖拽标注点  @dragend="dragPointMarker" -->
    <bm-marker :position="pointMarker" @mouseover="overPointMarker" :animation="animation">
    </bm-marker>
    <bm-info-window :closeOnClick="false" :position="pointMarker" @close="hideInfo" :show="showInfo">
      <div style="min-width: 100px" class="info">
        <p v-if="pointInfo.name">地点名称：{{ pointInfo.name }}</p>
        <p v-if="pointInfo.address">详细地址：{{ pointInfo.address }}</p>
        <p v-if="pointInfo.location">
          <span style="margin-right: 10px">
            纬度：{{ pointInfo.location.lat }}
          </span>
          <span>
            经度：{{ pointInfo.location.lng }}
          </span>
        </p>
      </div>
    </bm-info-window>
    <bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{ width: '10', height: '10' }">
      <el-autocomplete prefix-icon="el-icon-search" clearable size="mini" v-model="keyword"
        :fetch-suggestions="searchPlace" placeholder="请输入关键字" @select="selectPlace"></el-autocomplete>
    </bm-control>
    <bm-city-list @changeAfter="updateRegion" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
  </baidu-map>
</template>
<script>
import { suggestionBmap } from '@/api/public'

export default {
  props: {
    // 窗口宽度
    mapStyle: {
      type: Object,
      default: () => ({
        width: '100%',
        height: '600px',
      })
    },
  },
  data() {
    return {
      // 地图
      map: '',
      // 地图中心点
      mapCenter: {},
      // 地图缩放
      zoom: 15,
      // 点
      point: {},
      // 点信息
      pointInfo: {},
      // 是否展示点信息
      showInfo: false,
      // 标注点的坐标信息
      pointMarker: {},
      // 地图坐标解析器
      gc: '',
      // 检索地址
      place: '',
      // 当前行政区划
      region: '北京',
      animation: "BMAP_ANIMATION_BOUNCE",
      keyword: "",
      query: ""
    }
  },
  methods: {
    // 初始化地图
    loadedMap({ BMap, map }) {
      //创建地址解析器实例
      this.gc = new BMap.Geocoder();
      this.map = map;
      if (this.point.lat && this.point.lng) {
        this.mapCenter = this.point
        this.addMarker(this.point)
        this.pointInfo.location = this.point
      } else {
        this.mapCenter = "江西"
      }
      var that = this;
      setTimeout(() => {
        that.updateRegion();
      }, 800)

    },
    // 点击地图--更新点坐标，获取点信息，添加标注
    clickMap(event) {
      this.updatePoint(event.point)
      this.getPointInfo(event.point)
      this.addMarker(event.point)
      this.animation = "BMAP_ANIMATION_BOUNCE";
    },
    // 搜索地点
    searchPlace(queryString, cb) {
      if (queryString == undefined || queryString == null || queryString == '') {
        return;
      }
      // console.log(queryString)
      this.query = queryString
      console.log("query", this.query)
      var params = {
        query: queryString,
        region: this.region,
        cityLimit: "false"
      }
      suggestionBmap(params).then(res => {
        let results = res.data.result.map(item => {
          return {
            value: item.name,
            ...item
          }
        });
        cb(results);
      })
    },
    // 选择地点 -- 更新点，添加标注，调整地图视图,更新点信息，展示信息窗
    selectPlace(pointInfo) {
      console.log("选择地点", pointInfo)
      var point = new BMap.Point(pointInfo.location.lng, pointInfo.location.lat);
      this.zoom = 20;
      this.mapCenter = point
      this.updatePoint(point)
      this.getPointInfo(point)
      this.addMarker(point)
      this.animation = "BMAP_ANIMATION_BOUNCE";
      this.pointInfo = pointInfo
      this.showInfo = true
    },
    // 更新点坐标
    updatePoint(point) {
      console.log(point)
      this.point = point
    },
    // 获取点信息
    getPointInfo(point) {
      this.pointInfo.name = ''
      this.pointInfo.address = ''
      let that = this
      // 解析坐标点--获取坐标点所在的区域名称（城市）
      that.gc.getLocation(point, function (res) {
        let detailAddress = res.addressComponents
        // 省-- detailAddress.province
        that.region = detailAddress.city
        that.place = detailAddress.district + detailAddress.street + detailAddress.streetNumber
        that.pointInfo.location = point
        that.pointInfo.address = that.place
        res.name = that.pointInfo.name
        that.showInfo = true
        console.log("res", res)
        that.$emit('checkPoint', res)
      })
    },
    // 移动地图
    moveMap(point) {
      this.mapCenter = point
    },
    // 更新区划
    updateRegion() {
      // 获取地图的中心点
      let point = this.map.getCenter()
      let that = this
      // 解析坐标点--获取坐标点所在的区域名称（城市）
      that.gc.getLocation(point, function (res) {
        let detailAddress = res.addressComponents
        // 省-- detailAddress.province
        that.region = detailAddress.city
        that.place = detailAddress.province + detailAddress.city + detailAddress.district + detailAddress.street + detailAddress.streetNumber
        that.pointInfo.location = point
        that.pointInfo.address = that.place
        that.pointInfo.province = detailAddress.province;
        that.pointInfo.city = detailAddress.city;
        that.pointInfo.district = detailAddress.district
        that.pointInfo.street = detailAddress.street + detailAddress.streetNumber;
      })
    },
    // 设置地图缩放级别
    setZoom(zoom) {
      this.zoom = zoom
    },
    // 添加标注——跳动的点
    addMarker(point) {
      this.pointMarker = point;
    },
    // 点信息浮窗——鼠标悬浮在标注点上时，显示点信息
    overPointMarker() {
      this.showInfo = true
    },
    // 点信息浮窗——点击点信息浮窗上的关闭按钮，关闭点信息浮窗
    hideInfo() {
      this.showInfo = false
    },
  }
}
</script>
<style scoped>
.info {
  color: grey;
  font-size: 12px;
}
</style>
